import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Tooltip } from 'antd'
import style from './TableTags.module.less'
import { colors } from '../assets/js/config'

export default class TableTags extends Component {
  state = {
    colorList: colors
  }

  // 获取颜色样式,并设置鼠标样式
  getColorStyle (s, cursor = false) {
    const cl = this.state.colorList
    const i = this.props.tags.indexOf(s)
    if (i === -1) {
      return {}
    }
    const m = {
      backgroundColor: cl[((i + 1) % cl.length)]
    }
    if (cursor) {
      m.cursor = 'pointer'
    }
    return m
  }

  renderTag (li, clickHandle) {
    return (
      <div key={li} className={style.tag} style={this.getColorStyle(li, true)} onClick={clickHandle}>
        <span>{li}</span>
      </div>
    )
  }

  // 渲染标签
  renderTags () {
    const { noticeMap, caseno } = this.props
    return this.props.showTags.map(li => {
      const m = noticeMap[li]
      if (!m) {
        return this.renderTag(li)
      }
      if (m.Component) {
        return (
          <m.Component key={li} caseid={this.props.caseid} caseno={caseno} refreshFn={() => this.props.refreshFn()}>
            {this.renderTag(li)}
          </m.Component>
        )
      }
      return (
        <Tooltip title={m.title} key={li}>
          {this.renderTag(li, m.clickHandle)}
        </Tooltip>
      )
    })
  }

  render () {
    return (
      <div className={style.container}>
        {this.renderTags()}
      </div>
    )
  }
}

TableTags.propTypes = {
  tags: PropTypes.array,
  showTags: PropTypes.array,
  noticeMap: PropTypes.object,
  caseid: PropTypes.string,
  caseno: PropTypes.string,
  refreshFn: PropTypes.func
}

TableTags.defaultProps = {
  tags: [],
  showTags: [],
  noticeMap: {},
  caseid: '',
  caseno: '',
  refreshFn: () => {}
}
